<template>
  <div>
    <!-- Vant:导航栏 -->
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="商品列表" />
    <!-- Vant:搜索 -->
    <van-search v-model="val" placeholder="请输入搜索关键词" />
    <!-- Vant:下拉刷新 用来实现下拉刷新数据 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 某个分类下的商品数据  Vant:列表  用来实现上拉加载更多数据 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 商品数据  Vant:商品卡片 -->
          <van-card  v-for="items in goodsArr" :key="items.id"
          :price="items.price"  @click="toDetail(items.id)"
          :title="items.goodsname"
          :thumb="imgHost+items.img"
          :origin-price="items.market_price"
           />
        </van-list> 
    </van-pull-refresh>  
  </div>
</template>

<script>
import {getCateGoodsInfo} from '../../request/api.js'

export default {

  data() {
    return {
      val:'',
      list: [],
      paramObj:{
        cateid:'',//类别id
        type:'',//1为一级类别 2为二级类别
        page:1,//第几页
        size:3,//每页要显示的个数
      },
      goodsArr:[],//商品数据
      isLoading:false,
      loading: false,  //当滚动到底部时会触发load事件将把loading设置为true,load事件用来发送异步请求加载更多数据
      finished: false,  //当所有数据加载完成后则要把finished设置为true,此时不会触发load事件
    };
  },  
  methods:{
    toDetail(gid){  //跳转到商品详情页面
         this.$router.push(`/goodsdetail/${gid}`);
    },
    //实现上拉加载更多数据
    onLoad(){ 
      setTimeout(()=>{
       this.paramObj.page++;//增加页数
       this.categoryGoodsData(this.paramObj);
      },1000);

    },
    //实现下拉刷新数据：
    onRefresh(){
      setTimeout(()=>{
         this.finished = false;//重新开启上拉功能
         this.goodsArr = [];//重置商品数据
         this.paramObj.page = 1;//第一页
          this.categoryGoodsData(this.paramObj);
      },1000);

    },
     //获取某个类别下的商品数据：
    categoryGoodsData(pObj){ 
       getCateGoodsInfo(pObj).then(d=>{
        console.log(d,'dddd...');
          if(d.status == 200){
            if(d.data.list.goodData == null){  //没有查询到商品数据
                 this.finished = true
            }else{
              //concat()方法：数组合并
                 this.goodsArr = this.goodsArr.concat(d.data.list.goodData) ;
            }  
          }
          this.loading = false;//关闭上拉功能
          this.isLoading = false;//关闭下拉功能
       }).catch(e=>{
        console.log(e,'e');
       })
    }
  },
   mounted(){

    //接参(从'分类'传递过来的商品类别id)
    //citeid:某个类别id
    //type:1为一级分类 2为二级分类
    let {cateid,type} = this.$route.query;
    this.paramObj.cateid = cateid;
    this.paramObj.type = type;
    this.categoryGoodsData(this.paramObj);

   }
}
</script>

<style scoped>
.van-nav-bar{
  background-color: red;
}

.van-nav-bar /deep/ .van-nav-bar__title{
  color:white;
  font-size: 26px;
}
</style>